<template>
  <div class="register">
    <back-title :message="message"></back-title>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="usernameRuler" />
      <van-field v-model="phonenum" name="电话号码" label="电话号码" placeholder="电话号码" :rules="phonenumRuler" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="passwordRuler" />
      <van-field v-model="confirmPassword" type="password" name="确认密码" label="确认密码" placeholder="密码" :rules="CPRuler" />
      <div style=" margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import BackTitle from '../BackHeader/BackTitle.vue'
  import axios from 'axios'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    components: {
      BackTitle
    },
    data() {
      return {
        message: '注册',
        username: '',
        password: '',
        confirmPassword: '',
        phonenum: '',
        userId: '',
        passwordRuler: [{
            required: true,
            message: '请填写密码'
          },
          {
            validator: value => {
              if (value.length < 6) {
                return false
              } else {
                return true
              }
            },
            message: '密码不能小于六位数'
          }
        ],
        usernameRuler: [{
          required: true,
          message: '请填写用户名'
        }],
        CPRuler: [{
          required: true,
          message: '请填写密码'
        }, {
          validator: value => {
            if (this.confirmPassword === this.password) {
              return true
            } else {
              return false
            }
          },
          message: '密码不正确'
        }],
        phonenumRuler: [{
          required: true,
          message: '请填写手机号'
        }, {
          validator: value => {
            const list = this.userInfo.filter(item => {
              return item.phone_num === parseInt(this.phonenum)
            })
            if (list.length !== 0) {
              return false
            } else {
              return true
            }
          },
          message: '该手机号码已被注册'
        }]
      }
    },
    methods: {
      ...mapMutations(['SET_USER_INFO']),
      getUserInfo() {
        this.$api.homeData.userInfo().then(res => {
          this.SET_USER_INFO(res.data)
        })
      },
      async onSubmit(values) {
        const params = {
          user_id: this.userId,
          phone_num: parseInt(this.phonenum),
          user_pwd: this.password,
          login_name: this.username,
          nick_name: this.username,
          introduce: "没有个人简介"
        }
        await axios.post(axios.defaults.baseURI + 'books/malluser/', params).then(res => {
          console.log('res:', res)
          if (res.code === 201) {
            this.$toast('注册成功')
            setTimeout(this.$router.push({
              name: 'Login'
            }), 1000)
          } else {
            this.$toast('请求错误')
          }
        })
      }
    },
    created() {
      this.getUserInfo()
      console.log('userInfo:', this.userInfo)
      var today = new Date()
      var year = today.getFullYear() + ""
      var month = today.getMonth() + 1 + ""
      var day = today.getDate() + ""
      var hour = today.getHours() + ""
      var minute = today.getMinutes() + ""
      this.userId = parseInt(year + month + day + hour + minute)
    },
    computed: {
      ...mapState(['userInfo'])
    }
  }
</script>

<style scoped>
</style>
